<script setup>

</script>
<template>
     <div class="login-container">
      <!-- 卡片 -->
      <div class="login-card">
        <!-- 头部：logo+系统标题 -->
        <div class="header">
          <div class="logo">
            <img src="/icon/APP-icon-black.png" alt="平台Logo" class="logo-img">
          </div>
          <strong>宠物领养管理平台</strong>
        </div>

        <!-- 表单及按钮 -->
        <RouterView/>
      </div>
    </div>

</template>
<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url("/login_background.png");
  background-size: cover; 
  background-position: center; /* 图片居中显示（裁剪时保留中间部分） */
  background-repeat: no-repeat; /* 不重复*/
}
.login-card {
  width: 490px;
  height: 664px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  font-family: 'PingFang SC';
}
.header {
  display: flex;
  align-items: center;
  background-color: transparent;
  color: #2B2B2B;
  margin: 0 auto;
  margin-top: 48px;
  width: 330px;
  height: 72px;
  font-size: 28px;
}
.logo {
  height: 72px;
  width: 72px;
}
.logo-img {
  width: 100%;
  height: 100%;
}
</style>